<template>
  <el-container>
    <!-- 总的内容区域 -->
    <div class="content-container">
      <div class="gap-1">
        <!-- 公寓配套 -->
        <!-- <el-header>配套信息管理</el-header> -->
        <div>配套信息管理</div>
        <el-main>
          <!-- 公寓配套内容区域 -->
          <div class="apartment-features">
            <!-- 健身房、停车场、电梯、咖啡室等 -->
            <label>公寓配套:</label>
            <el-space wrap>
              <el-card
                @click="handleChoose(item)"
                v-for="(item, index) in items"
                :key="index"
                class="box-card"
              >
                <template #header>
                  <div class="clearfix">
                    <component :is="getIconComponent(item.icon)" />
                    <span>{{ item.name }}</span>
                  </div>
                </template>
              </el-card>
              <el-button @click="addApartTag()">添加标签</el-button>
            </el-space>
          </div>
          <!-- 房间配套内容区域 -->
          <div class="room-features">
            <!-- 空调、洗衣机、冰箱、床、橱柜、书桌、WIFI、椅子等 -->
            <label>房间配套:</label>
            <el-space wrap>
              <el-card
                @click="handleRoomChoose(item)"
                v-for="(item, index) in demos"
                :key="index"
                class="box-card"
              >
                <template #header>
                  <div class="clearfix">
                    <component :is="getIconComponent(item.icon)" />
                    <!-- <img src="../assets/{{item.icon}}.svg" :alt=" item.name" class="icon" /> -->
                    <span>{{ item.name }}</span>
                  </div>
                </template>
              </el-card>
              <el-button @click="addRoomTag()">添加标签</el-button>
            </el-space>
          </div>
          <!-- 配套管理修改页面 -->
          <div class="gap-1.1">
            <el-dialog
              v-model="centerDialogVisibleApart"
              :title="titleApart"
              style="width: 500px; height: 300px"
              align-center
            >
              <span>配套名称:</span>
              <input type="text" v-model="apartName.name" style="width: 100px" /><br />
              <span>配套图标:</span>
              <el-select v-model="selectValue" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.icon"
                  :label="item.label"
                  :value="item.icon"
                  style="width: 100px"
                >
                </el-option>
              </el-select>
              <template #footer>
                <div class="dialog-footer">
                  <el-button
                    v-if="showApartBut"
                    type="danger"
                    @click="delectset(apartName.id)"
                    >删除</el-button
                  >
                  <el-button
                    v-if="showRoomBut"
                    type="danger"
                    @click="delectRoomset(apartName.id)"
                    >删除</el-button
                  >
                  <el-button
                    v-if="showApartBut"
                    type="primary"
                    @click="updateFac(apartName.id, apartName.name, selectValue)"
                  >
                    修改
                  </el-button>
                  <el-button
                    v-if="showRoomBut"
                    type="primary"
                    @click="updateRoomFac(apartName.id, apartName.name, selectValue)"
                  >
                    修改
                  </el-button>
                  <el-button
                    v-if="showInsertBut"
                    type="primary"
                    @click="insertFac(apartName.name, selectValue)"
                  >
                    新增
                  </el-button>
                  <el-button
                    v-if="showInsertRoomBut"
                    type="primary"
                    @click="insertRoomFac(apartName.name, selectValue)"
                  >
                    新增
                  </el-button>
                </div>
              </template>
            </el-dialog>
          </div>
        </el-main>
      </div>
      <div class="gap-2">
        <!-- 房间配套 -->
        <!-- <el-header>标签管理</el-header> -->
        <div>标签管理</div>
        <el-main>
          <div class="gap-2.1">
            <div class="gap-2.1.1">
              <label for="">公寓标签:</label>
              <el-tag
                v-for="tag in dynamicTags"
                :key="tag"
                :disable-transitions="false"
                @click="handleCloseApart(tag)"
              >
                {{ tag.name }}
              </el-tag>

              <el-button
                type="primary"
                plain
                class="button-new-tag"
                size="small"
                @click="showdialog"
              >
                添加标签
              </el-button>
            </div>
            <div class="gap-2.1.2">
              <label for="">房间标签:</label>
              <el-tag
                v-for="tag in dynamicTagss"
                :key="tag"
                :disable-transitions="false"
                @click="handleCloseRoom(tag)"
              >
                {{ tag.name }}
              </el-tag>

              <el-button
                type="primary"
                plain
                class="button-new-tag"
                size="small"
                @click="showInput"
              >
                添加标签
              </el-button>
              <div>
                <el-dialog
                  v-model="centerDialogVisible"
                  :title="titlename"
                  width="500"
                  align-center
                >
                  <input type="text" v-model="inputValue.name" />
                  <template #footer>
                    <div class="dialog-footer">
                      <el-button
                        v-if="showbut"
                        type="danger"
                        @click="deleteById(inputValue.id, inputValue.type)"
                        >删除</el-button
                      >
                      <el-button
                        v-if="showbut"
                        type="primary"
                        @click="updateLabel(inputValue.id, inputValue.type)"
                      >
                        修改
                      </el-button>
                      <el-button
                        v-if="showButSv"
                        type="primary"
                        @click="saveLabel(inputValue.type)"
                      >
                        保存
                      </el-button>
                    </div>
                  </template>
                </el-dialog>
              </div>
            </div>
          </div>
        </el-main>
      </div>
      <div class="gap-3">
        <!-- 标签管理 -->
        <!-- <el-header>房间基本信息管理</el-header> -->
        <div>房间基本信息管理</div>
        <el-main>
          <!-- 标签管理内容区域 -->
          <div class="tag-management">
            <!-- 房间基本信息管理 -->
            <div class="tag-management">
              <!-- 每个属性区块 -->
              <div v-for="attr in editableTabs" :key="attr.id" class="attribute-block">
                <!-- 属性名称 -->
                <div class="attribute-header">
                  <span class="attribute-title">{{ attr.name }}：</span>

                  <!-- 属性值标签 -->
                  <el-tag
                    v-for="(value, vIndex) in attr.attrValueList"
                    :key="vIndex"
                    class="attribute-tag"
                    closable
                    @close="removeAttrValue(value.id)"
                    @click="updateAttrValue(value.id, attr.id, value.name)"
                  >
                    {{ value.name }}
                  </el-tag>

                  <!-- 操作按钮 -->
                  <el-button size="mini" @click="showAddValueDialog(attr.id, attr.name)"
                    >添加属性值</el-button
                  >
                  <el-button size="mini" type="danger" @click="removeAttribute(attr.id)"
                    >删除该属性</el-button
                  >
                </div>
              </div>

              <!-- 添加新属性 -->
              <div class="add-attribute">
                <el-button type="primary" size="small" @click="showAddAttrDialog">
                  + 添加属性
                </el-button>
              </div>

              <!-- 添加属性值对话框 -->
              <el-dialog
                v-model="valueDialogVisible"
                :title="title"
                width="30%"
              >

                <el-input v-model="newValue" placeholder="请输入属性值" />
                <template #footer>
                  <el-button @click="valueDialogVisible = false">取消</el-button>
                  <el-button type="primary" v-if="showattrBut" @click="addAttributeValue">确认</el-button>
                  <el-button type="primary" v-else @click="ubdateAttributeValue">确认</el-button>

                </template>
              </el-dialog>

              <!-- 添加属性对话框 -->
              <el-dialog v-model="attrDialogVisible" title="添加新属性" width="30%">
                <el-input v-model="newAttributeName" placeholder="请输入属性名称" />
                <template #footer>
                  <el-button @click="attrDialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="addAttribute">确认</el-button>
                </template>
              </el-dialog>
            </div>
          </div>
        </el-main>
      </div>
    </div>
  </el-container>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import { ElContainer, ElMain, ElTag, ElButton } from "element-plus";
import request from "@/utils/request";
import * as ElementPlusIcons from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
// 动态标签相关变量
const inputValue = ref([]);
const dynamicTags = ref([]);
const centerDialogVisible = ref(false);
const centerDialogVisibleApart = ref(false);
const dynamicTagss = ref([]);
const titlename = ref("");
const titleApart = ref("");
const title = ref("");
const showbut = ref(false);
const showButSv = ref(false);
const showApartBut = ref(false);
const showInsertBut = ref(false);
const showRoomBut = ref(false);
const showInsertRoomBut = ref(false);
// 配套相关变量
const items = ref([]);
const demos = ref([]);
const apartName = ref([]);
const selectValue = ref("");
// 标签管理相关变量
// const editableTabsValue = ref("1");
const editableTabs = ref([]);
const attrDialogVisible = ref(false);
const valueDialogVisible = ref(false);
const newValue = ref("");
const newAttributeName = ref("");
const newattrKeyId = ref("");
const valueId = ref("");
const showattrBut = ref(false);
const options = reactive([
  { icon: "Baseball", label: "健身房" },
  { icon: "Bicycle", label: "停车位" },
  { icon: "VideoCamera", label: "安保" },
  { icon: "Coffee", label: "咖啡室" },
  { icon: "Reading", label: "书吧" },
  { icon: "OfficeBuilding", label: "休息室" },
  { icon: "Dish", label: "便利店" },
  { icon: "DCaret", label: "电梯" },
  { icon: "KnifeFork", label: "团建" },
  { icon: "LocationInformation", label: "休闲区" },
  { icon: "Platform", label: "监控" },
  { icon: "冰箱", label: "冰箱" },
]);

onMounted(() => {
  gainMsgDys();
  gainMsgdyss();
  gainFacilityMsg();
  gainFacilityMsgs();
  gainMsgAttr();
});
// 动态获取 Element Plus 图标组件
const getIconComponent = (iconName) => {
  return ElementPlusIcons[iconName] || "div"; // 默认显示空组件
};
async function gainMsgAttr() {
  const req = await request.get("/admin/attr/list");

  if (req.data.code === 200) {
    editableTabs.value = req.data.data;
    console.log(editableTabs.value);
  }
}
async function gainFacilityMsg() {
  const req = await request.get("/admin/facility/list?type=1");
  if (req.data.code === 200) {
    items.value = req.data.data;
  }
}
async function gainFacilityMsgs() {
  const req = await request.get("/admin/facility/list?type=2");
  if (req.data.code === 200) {
    demos.value = req.data.data;
  }
}
async function showAddAttrDialog() {

  attrDialogVisible.value = true;
  newAttributeName.value = "";
  }
async function addAttribute(){
 const req = await request.post("/admin/attr/key/saveOrUpdate",{

    name:newAttributeName.value,

  });
  if (req.data.code === 200) {
    ElMessage.success("添加成功");
    gainMsgAttr();
    attrDialogVisible.value = false;

}else{
  ElMessage.error("添加失败");
}
}
async function showAddValueDialog(id,name) {
  valueDialogVisible.value = true;
  newattrKeyId.value = id;
  title.value = `添加${name}属性值`;
  newValue.value = "";
  showattrBut.value = true;
}
async function addAttributeValue(){
  const req = await request.post("/admin/attr/value/saveOrUpdate",{
    name:newValue.value,
    attrKeyId: newattrKeyId.value
  });
  if (req.data.code === 200) {
    ElMessage.success("添加成功");
    gainMsgAttr();
    valueDialogVisible.value = false;
  }else{
    ElMessage.error("添加失败");
  }
}
async function removeAttrValue(id){
  const req = await request.delete(`/admin/attr/value/deleteById?id=${id}`);
  if (req.data.code === 200) {
    ElMessage.success("删除成功");
    gainMsgAttr();
  }else{
    ElMessage.error("删除失败");
  }
}

async function removeAttribute(id){
  const req = await request.delete(`/admin/attr/key/deleteById?attrKeyId=${id}`);
  console.log(req.data.code);
  console.log(id);
  if (req.data.code === 200) {
    ElMessage.success("删除成功");
    gainMsgAttr();
  }else{
    ElMessage.error("删除失败");
  }
}
function handleChoose(item) {
  centerDialogVisibleApart.value = true; // 显示弹窗
  titleApart.value = "修改公寓配套信息"; // 设置弹窗标题
  apartName.value = { ...item }; // 设置配套名称
  selectValue.value = item.icon; // 设置配套图标
  showApartBut.value = true;
  showRoomBut.value = false; // 显示修改删除按钮
  showInsertBut.value = false; // 隐藏新增按钮
}
function handleRoomChoose(item) {
  centerDialogVisibleApart.value = true; // 显示弹窗
  titleApart.value = "修改房间配套信息"; // 设置弹窗标题
  apartName.value = { ...item }; // 设置配套名称
  selectValue.value = item.icon; // 设置配套图标
  showApartBut.value = false; // 显示修改删除按钮
  showInsertBut.value = false; // 隐藏新增按钮
  showRoomBut.value = true; // 显示修改删除按钮
  showInsertRoomBut.value = false; // 隐藏新增按钮
}
async function delectset(id) {
  const req = await request.delete(`/admin/facility/deleteById?id=${id}`);
  if (req.data.code === 200) {
    centerDialogVisibleApart.value = false;
    ElMessage.success("删除成功");
    gainFacilityMsg();
  } else {
    centerDialogVisibleApart.value = false;
    ElMessage.error("删除失败");
    gainFacilityMsg();
  }
}
async function updateFac(id, name, icon) {
  const req = await request.post("/admin/facility/saveOrUpdate", {
    id: id,
    name: name,
    icon: icon,
    type: 1,
  });
  if (req.data.code === 200) {
    centerDialogVisibleApart.value = false;
    ElMessage.success("修改成功");
    gainFacilityMsg();
  } else {
    centerDialogVisibleApart.value = false;
    ElMessage.error("修改失败");
    gainFacilityMsg();
  }
}
async function delectRoomset(id) {
  const req = await request.delete(`/admin/facility/deleteById?id=${id}`);
  if (req.data.code === 200) {
    centerDialogVisibleApart.value = false;
    ElMessage.success("删除成功");
    gainFacilityMsgs();
  } else {
    centerDialogVisibleApart.value = false;
    ElMessage.error("删除失败");
    gainFacilityMsgs();
  }
}
async function updateRoomFac(id, name, icon) {
  const req = await request.post("/admin/facility/saveOrUpdate", {
    id: id,
    name: name,
    icon: icon,
    type: 2,
  });
  if (req.data.code === 200) {
    centerDialogVisibleApart.value = false;
    ElMessage.success("修改成功");
    gainFacilityMsgs();
  } else {
    centerDialogVisibleApart.value = false;
    ElMessage.error("修改失败");
    gainFacilityMsgs();
  }
}
async function insertFac(name, icon) {
  const req = await request.post("/admin/facility/saveOrUpdate", {
    name: name,
    icon: icon,
    type: 1,
  });
  if (req.data.code === 200) {
    centerDialogVisibleApart.value = false;
    ElMessage.success("新增成功");
    gainFacilityMsg();
  } else {
    centerDialogVisibleApart.value = false;
    ElMessage.error("新增失败");
    gainFacilityMsg();
  }
}
async function insertRoomFac(name, icon) {
  const req = await request.post("/admin/facility/saveOrUpdate", {
    name: name,
    icon: icon,
    type: 2,
  });
  if (req.data.code === 200) {
    centerDialogVisibleApart.value = false;
    ElMessage.success("新增成功");
    gainFacilityMsgs();
  } else {
    centerDialogVisibleApart.value = false;
    ElMessage.error("新增失败");
    gainFacilityMsgs();
  }
}
async function addApartTag() {
  centerDialogVisibleApart.value = true; // 显示弹窗
  titleApart.value = "新增公寓配套信息"; // 设置弹窗标题
  apartName.value = {
    name: "",
    id: "",
  }; // 设置配套名称
  selectValue.value = ""; // 设置配套图标
  showApartBut.value = false; // 显示修改删除按钮
  showInsertRoomBut.value = false;
  showRoomBut.value = false;
  showInsertBut.value = true; // 隐藏新增按钮
}
async function addRoomTag() {
  centerDialogVisibleApart.value = true; // 显示弹窗
  titleApart.value = "新增房间配套信息"; // 设置弹窗标题
  apartName.value = {
    name: "",
    id: "",
  }; // 设置配套名称
  selectValue.value = ""; // 设置配套图标
  showInsertBut.value = false; // 隐藏新增按钮
  showInsertRoomBut.value = true; // 显示新增按钮
  showRoomBut.value = false;
  showApartBut.value = false;
}
async function gainMsgDys() {
  const req = await request.get("/admin/label/list?type=1");
  if (req.data.code === 200) {
    dynamicTags.value = req.data.data;
  }
}

async function gainMsgdyss() {
  const req = await request.get("/admin/label/list?type=2");

  if (req.data.code === 200) {
    dynamicTagss.value = req.data.data;
  }
}

function handleCloseApart(tag) {
  titlename.value = "修改公寓标签";
  centerDialogVisible.value = true;
  showButSv.value = false;
  showbut.value = true;
  inputValue.value = tag;
}
function handleCloseRoom(tag) {
  centerDialogVisible.value = true;
  titlename.value = "修改房间标签";
  showButSv.value = false;
  showbut.value = true;
  inputValue.value = tag;
}
async function deleteById(id, type) {
  const req = await request.delete(`/admin/label/deleteById?id=${id}`);
  if (req.data.code === 200 && type === 1) {
    gainMsgDys();
  }
  if (req.data.code === 200 && type === 2) {
    gainMsgdyss();
  }
  centerDialogVisible.value = false;
}
async function updateLabel(id, type) {
  const req = await request.post("/admin/label/saveOrUpdate", {
    id,
    name: inputValue.value.name,
    type,
  });
  if (req.data.code === 200 && type === 1) {
    gainMsgDys();
  }
  if (req.data.code === 200 && type === 2) {
    gainMsgdyss();
  }
  centerDialogVisible.value = false;
}

// 新增标签相关函数
const showInput = () => {
  titlename.value = "添加房间标签";
  centerDialogVisible.value = true;
  showbut.value = false;
  showButSv.value = true;
  inputValue.value = {
    name: "",
    type: 2,
  };
};
const showdialog = () => {
  titlename.value = "添加公寓标签";
  centerDialogVisible.value = true;
  showbut.value = false;
  showButSv.value = true;
  inputValue.value = {
    name: "",
    type: 1,
  };
};
async function saveLabel() {
  if (inputValue.value.type === 1) {
    const req = await request.post("/admin/label/saveOrUpdate", {
      name: inputValue.value.name,
      type: 1,
    });
    if (req.data.code === 200) {
      gainMsgDys();
    }
    centerDialogVisible.value = false;
    console.log(1);
  }
  if (inputValue.value.type === 2) {
    const req = await request.post("/admin/label/saveOrUpdate", {
      name: inputValue.value.name,
      type: 2,
    });
    if (req.data.code === 200) {
      gainMsgdyss();
    }
    centerDialogVisible.value = false;
    console.log(2);
  }
}
async function updateAttrValue(vid,aid,name){
  valueDialogVisible.value = true;
  title.value = `修改${name}属性值`;
  newValue.value = name;
  valueId.value = vid;
  newattrKeyId.value = aid;

}
async function ubdateAttributeValue(){
  const req = await request.post("/admin/attr/value/saveOrUpdate",{
    id:valueId.value,
    name:newValue.value,
    attrKeyId: newattrKeyId.value
  });
  if (req.data.code === 200) {
    ElMessage.success("修改成功");
    gainMsgAttr();
    valueDialogVisible.value = false;
  }else{
    ElMessage.error("修改失败");
  }


}
</script>

<style scoped>
.content-container {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 20px; /* 减少内边距 */
  width: 95%;
  height: auto;
  display: flex;
  flex-direction: column;
  background-color: azure;
}

.apartment-features,
.room-features,
.tag-management {
  padding: 15px; /* 减少内边距 */
  flex: 1;
}

.box-card {
  width: 100px;
  margin: 5px; /* 添加间距 */
}

.icon {
  margin-right: 10px; /* 减少间距 */
}

.name {
  width: 100px;
}

.tag-management {
  padding: 10px; /* 减少内边距 */
}

.attribute-block {
  margin-bottom: 10px; /* 减少间距 */
  padding: 10px; /* 减少内边距 */
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.attribute-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px; /* 减少间距 */
}

.attribute-title {
  font-weight: 500;
  min-width: 60px;
}

.attribute-tag {
  margin-right: 5px; /* 减少间距 */
}

.add-attribute {
  margin-top: 10px; /* 减少间距 */
  border-top: 1px dashed #ddd;
  padding-top: 10px; /* 减少间距 */
}
</style>
